<template>
	<view class="class">
		<view class="class_list">
			<view class="class_list_item" v-for="item in list" :key="item.classHoursId">
				<view class="class_list_item_cont">
					<view class="title">{{ item.courseName }}</view>
					
					<!-- <view class="startTime">
						<text class="item">教练：</text>
						<text>{{item.coachName}}</text>
					</view> -->
					<view class="site">
						<text class="item">学习场景：</text>
						<text>{{ item.applicationStudents }}</text>
					</view>
					<view class="startTime">
						<text class="item">更新日期：</text>
						<!-- <u-icon name="clock"></u-icon> -->
						<text>{{item.updatedTime}}</text>
					</view>
					<view class="startTime">
						<text class="item">地址：</text>
						<text>{{ item.courseAddress }}</text>
					</view>
					<view class="startTime">
						<text class="item">状态：</text>
						<text>{{ item.courseState | stateName }}</text>
					</view>

					<view class="u-page__button-item" @click="onCreateClassHour(item.courseId)">
						<u-button
								text="新增课时"
								size="small"
								type="primary"
						></u-button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {queryCourseList, buyCourse} from '../../common/api'
import lxCalendar from '../../components/lx-calendar/lx-calendar.vue'
export default {
	components: {
		lxCalendar,
	},
	data() {
		return {
			list: [],
			userData: uni.getStorageSync('userData'), //获取用户信息
		}
	},
	filters: {
		stateName: function (value) {
			if(value == 0){
				return '已开放报名'
			} else if(value == 1) {
				return '进行中'
			} else if(value == 2) {
				return '已满员'
			} else if(value == 3) {
				return '已取消'
			}
		}
	},
	onLoad(o) {	
		this.getCourseList()
		
	},
	methods: {
		async getCourseList() {
			let res = await queryCourseList(this.userData.user.coachId)
			this.list = res
		},
		onCreateClassHour(id) {
			uni.navigateTo({
				url: `/pages/createClassHour/createClassHour?courseId=${id}`
			});
		},
	}
}
</script>

<style lang="scss" scoped>
.class {
	.add_button {
		margin: 32rpx;
		width: 200rpx;
	}

	.class_list {
		margin: 32rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.class_list_item {
			width: 100%;
			margin-bottom: 32rpx;

			.class_list_item_cont {
				text-align: c;
				background: #f5f5f5;
				border-radius: 15rpx;
				padding: 20rpx;

				.title {
					font-size: $uni-font-size-medium;
					font-weight: bold;
					margin-bottom: 25rpx;
					text-align: center;
				}

				.site,
				.startTime,
				.endTime,
				.num,
				.state {
					display: flex;
					font-size: $uni-font-size-small;
					margin-bottom: 10rpx;

					.item {
						width: 180rpx;
					}

					text {
						margin-left: 10rpx;
						color: $uni-color-type1;
					}

					.style {
						color: #333;
						font-weight: bold;
					}

					.content {
						width: calc(100% - 180rpx);
					}
				}
				.u-page__button-item {
					margin-top: 32rpx;
				}
			}

			.describe {
				background: #f5f5f5;
				border-radius: 15rpx;
				padding: 20rpx;
				margin-top: 32rpx;
				.title {
					font-size: $uni-font-size-medium;
					font-weight: bold;
					padding-bottom: 20rpx;
				}
				.content {
					color: $uni-color-type1;
					font-size: $uni-font-size-small;
				}
			}
		}
	}
}
</style>
